<template>
<div class="application">
  <h2>{{title}}</h2>
  <div class="content" @click="goToDetails">
    <div class="item" v-for="item in applicationsArr" :key="item.id" >
      <img :src="item.image_main" alt="" @error="getError">
      <div class="item-content">
<!--        <img :src="item.icon" alt="">-->
        <h4>{{item.name}}</h4>
        <p class="intro" :title="item.intro">{{item.intro}}</p>
        <LearnButton :title="item.id+''" :name="item.name"/>
      </div>
    </div>
    <a-button type="primary" class="get-more" @click="goMoreData" v-if="isShow">More ></a-button>
  </div>
</div>
</template>

<script>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import LearnButton from '../LearnButton.vue'
import logoImg from "../../assets/logo-error-small.png"
export default {
  name: "SolutionApplications",
  components:{LearnButton},
  props:{
    applicationsArr:{
      type:Array,
      default: []
    },
    title:{
      type:String,
      default: ""
    }
  },
  setup(props,ctx){
    const {emit} = ctx
    const router = useRouter()
    let isShow = ref(true)
    const getError = (e) => {
      e.target.src = logoImg
    }
    const goToDetails = (el)=>{
      if(el.target.title){
        router.push({path:'/solutionDetail',query:{id:el.target.title*1}});
        window._czc.push(['_trackEvent', '点击', '进入到解决方案详情页面',"方案名称：" +el.target.name]);
      }
    }
    const goMoreData = ()=>{
      emit("getSize",100)
      isShow.value = false
    }
    return {
      getError,
      goToDetails,
      goMoreData,
      isShow
    }
  }
}
</script>

<style scoped lang="scss">
.application{
  h2{
    text-align: center;
    font-size:30px;
    line-height: 80px;
  }
  .content{
    margin:0 auto;
    width:70vw;
    display: flex;
    flex-wrap: wrap;
    .item{
      position: relative;
      width:50%;
      padding:15px;
      box-sizing: border-box;
      img{
        width:100%;
        height: 600px;
        object-fit: cover;
      }
      .item-content{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        text-align: center;
        color:white;
        width:380px;
        img{
          width:67px;
          height:67px;
        }
        h4{
          color:white;
          margin:25px 0;
          font-weight:600;
          font-size: 20px;
        }
        p{
          font-size:18px;
          margin-bottom:35px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
    .get-more{
      margin:0 auto 20px auto;
    }
  }
}
</style>
